<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: 'index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button type="primary" plain class="Button" @click="addCateButton"
        >添加分类</el-button
      >
      <!-- 添加分类 -->
      <!-- :before-close="handleClose" -->
      <el-dialog
        title="添加分类"
        :visible.sync="AddCateValue"
        width="30%"
        @close="addCateDialong"
      >
        <el-form :model="addACateFrom" :rules="addCateFromRules">
          <el-form-item label="分类名称：" prop="cat_name">
            <el-input
              v-model="addACateFrom.cat_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="父级分类：">
            <el-cascader
              expend-trigger="hover"
              v-model="selectedKeys"
              :options="ParentCateList"
              @change="ChangeValueList"
              :props="cascaderProps"
              clearable
              change-on-select
            ></el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="AddCateValue = false">取 消</el-button>
          <el-button type="primary" @click="addCate">确 定</el-button>
        </span>
      </el-dialog>
      <zk-table
        :data="CategoriesList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        broder
        :show-row-hover="false"
      >
        <!-- 是否有效 -->
        <template slot="isok" slot-scope="scope">
          <i
            class="el-icon-success"
            v-if="scope.row.cat_deleted === false"
            style="color: lightgreen"
          ></i
          ><i class="el-icon-error" v-else style="color: red"></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag
            type="success"
            size="mini"
            v-else-if="scope.row.cat_level === 1"
            >二级</el-tag
          >
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt" slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="compileValue(scope.row)"
          >
            编辑</el-button
          >

          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="deleteCompile(scope.row)"
            >删除</el-button
          ></template
        >
      </zk-table>
      <el-dialog title="编辑分类" :visible.sync="ShowCompileValue">
        <el-form :model="compileList">
          <el-form-item label="分类名称">
            <el-input
              autocomplete="off"
              v-model="compileList.cat_name"
            ></el-input>
          </el-form-item>
          <el-form-item label="父级分类">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="ShowCompileValue = false">取 消</el-button>
          <el-button type="primary" @click="ShowCompileValue = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 分页 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="querInfo.pagenum"
        :page-sizes="[3, 4, 5, 6]"
        :page-size="querInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination> -->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询条件
      querInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      // 控制分类显示隐藏
      AddCateValue: false,
      total: 0,
      CategoriesList: [],
      // 编辑分类开关
      ShowCompileValue: false,
      // 编辑分类
      compileList: {
        cat_name: "",
      },
      // 定义分类
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          type: "template",
          template: "isok",
        },
        {
          label: "排序",
          type: "template",
          template: "order",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
      // 添加分类表
      addACateFrom: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0,
      },
      addCateFromRules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
      // 父级分类列表
      ParentCateList: [],
      // 指定联机选择器对象
      cascaderProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      selectedKeys: [],
    };
  },
  methods: {
    // 添加分类
    addCateButton() {
      this.AddCateValue = true;
      this.getParentCateList();
    },
    // 打开编辑框口
    compileValue(row) {
      this.ShowCompileValue = true;
    },
    // 编辑商品
    setGooodsValue(row) {
      this.$Req
        .put(`categories/${row.cat_id}`, { cat_name: row.cat_name })
        .then((res) => {});
      // this.dialogFormVisible = false;
    },
    // 获取商品分类
    getCategories() {
      this.$Req.get("/categories").then((res) => {
        const { data, meta } = res.data;
        this.CategoriesList = data;
      });
    },
    // 获取父级分类列表
    async getParentCateList() {
      await this.$Req
        .get("categories", {
          params: { type: 2 },
        })
        .then((res) => {
          const { data, meta } = res.data;

          this.ParentCateList = data;
        });
    },
    // 选项变化时触发
    ChangeValueList() {
      if (this.selectedKeys.length > 0) {
        // 父级分类id
        this.addACateFrom.cat_pid =
          this.selectedKeys[this.selectedKeys.length - 1];
        // 当前分类等级赋值
        this.addACateFrom.cat_level = this.selectedKeys.length;
      } else {
        this.addACateFrom.cat_pid = 0;
        // 当前分类等级赋值
        this.addACateFrom.cat_level = 0;
      }
    },
    // 点击按钮添加分类
    async addCate() {
      await this.$Req.post(`categories`, this.addACateFrom).then((res) => {
        console.log(res);
        const { data, meta } = res.data;
        this.AddCateValue = false;
        if (meta.status === 201) {
          this.$message({
            type: "success",
            message: meta.msg,
          });
          this.getCategories();
        }
      });
    },
    addCateDialong() {
      this.selectedKeys = [];
      this.addACateFrom.cat_pid = 0;
      this.addACateFrom.cat_level = 0;
    },
    deleteCompile(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$Req
          .delete(`categories/${row.cat_id}`)
          .then((res) => {
            const { data, meta } = res.data;
            if (meta.status === 201) {
              this.$message({
                type: "success",
                message: meta.msg,
              });
            }
            this.getCategories();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
  },
  mounted() {
    this.getCategories();
  },
};
</script>

<style>
.Button {
  float: left;
}
</style>